<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>


    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


</head>

<style>
    .form-group > .col-sm-4 {
        padding: 0;
    }


    .more-condition-search .fa {
        margin-left: 5px;
    }

    .panel-body {
        padding-bottom: 5px;
    }
</style>
<body>
<script type="text/javascript">


</script>

<div id="rrapp" v-cloak>
    <form class="form-horizontal" id="myForm">
        <div class="pull-center" id="query-form" style="padding-bottom:10px;">
            <div class="panel-body">
                <div class="form-group search-condition-1">
                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">操作人查询</label>
                        <div class="col-sm-8">
                            <input type="text" id="username" name="serviceName"
                                   style="width:100%"
                                   class="k-textbox">
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <label class="col-sm-4 control-label">请求方法查询</label>
                        <div class="col-sm-8">
                            <input type="text" id="operation" name="conversationId"
                                   style="width:100%"
                                   class="k-textbox">
                        </div>


                    </div>

                    <div class="col-sm-4">
                        <div class="col-sm-8">
                            <span id="btnSearch" class="btn btn-primary" style="float:left;margin-right:5px;"
                                  data-bind="click:selectList"
                                  type="button"><i class="fa fa-search" style="margin-right:3px;"></i>查询</span>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </form>


    <div style="clear:both">
        <div id="grid"></div>
    </div>


</div>


<script>


    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,

        },
        methods: {
            getMenu: function (menuId) {


            },

            saveOrUpdate: function () {
                if (vm.validator()) {
                    return;
                }

                var url = vm.menu.menuId == null ? "/wedding_admin/sys/sysmenu/save" : "/wedding_admin/sys/sysmenu/update";
                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.menu),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功');
                            vm.reload();
                            jQuery("#menuLayer").hide();//隐藏

                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            reload: function () {
                vm.showList = true;
                Menu.table.refresh();
            }


        }
    });

    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };


    var username = "";
    var operation = "";
    var state = "";
    var crudServiceBaseUrl = "/wedding_admin/sys/syslog/list",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl,
                    type: "POST",
                    dataType: "json"
                },
                parameterMap: function (options, type) {

                    if (type == "read" && options.page) {

                        var datas = Hap.prepareSubmitParameter(options, type);


                        return {//分页参数
                            limit: options.pageSize,  //当前页码
                            page: options.page, //每页显示记录数
                            username: username,//模糊查询参数
                            operation: operation,
                            state:state //是否启用模糊查询状态
                        }

                    } else if (type !== "read") {

                        return Hap.prepareQueryParameter(viewModel.model.toJSON(), options);

                    }
                }
            },
            batch: true,
            serverPaging: true,
            pageSize: 10,
            schema: {
                data: function (data) {
                    return data.page.list;
                },
                total: function (data) {
                    return data.page.totalCount;
                },
                model: {
                    id: "id",
                    fields: {
                        create_time: {type: "date", format: "{0:yyyy-MM-dd HH:mm:ss}"}
                    }
                }
            }


        });


    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        dataBound: function () {

            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('HSP_SERVICE_INSTANCE')
            }
        },
        resizable: true,
        scrollable: true,
        navigatable: false,
        editable: false,
        selectable: 'multiple,rowbox',
        pageable: {
            pageSizes: [10, 20, 50, 100, 200, 500],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "id",
                title: '日志ID',
                width: 80,

                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "username",
                title: '用户名称',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "operation",
                title: '用户操作',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "method",
                title: '请求方法',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "params",
                title: '请求参数',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "time",
                title: '执行时长(毫秒)',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "ip",
                title: 'IP地址',
                width: 120,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "createDate",
                title: '创建时间',
                width: 120,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            }
        ]
    }).data("kendoGrid");


    Hap.autoResizeGrid("#grid");

    $("#btnSearch").click(function () {//查询按钮
        var s_user_name = $("#username").val();//获取文本框中的文本
        var s_operation = $("#operation").val();//获取文本框中的文本

        username = s_user_name;  //将文本传给 数据源(dataScorce)中的 demoCondiions
        operation = s_operation;
        state = "S";
        grid.dataSource.page(1);  //更新 Grid

    });
</script>

</body>
</html>
